<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
    </style>
</head>
<!-- contenteditable 浏览器编辑属性 -->
<body>
    <div id="app">
        <!-- 
            指令的组成：v-指令名[:指令参数][.修饰符名][.修饰符名]……[=取值]
                + 参数用于定义指令对应的功能
                + 修饰符是为指令执行功能提供分支操作，或者限制操作
                + 取值指令的执行主体，执行功能，取值主体，取值功能
        -->
        <textarea cols="30" rows="10" @keydown="printKeyDown($event)"></textarea>
        <br>
        <textarea cols="30" rows="10" @keydown.a="printKeyDown2($event)"></textarea>
        <br>
        <!-- if(e.key=="b"||e.key=="a"){ -->
        <textarea cols="30" rows="10" @keydown.a.b.c="printKeyDown2($event)"></textarea>

        <h3>按键修饰符</h3>
        <!--
            通过对电脑外设的按键进行监听控制操作，完成回调触发限制
                * .{keyAlias} 对js键盘事件而言，事件源对象($event)必然存在两个特殊取值 keyCode key
                * .enter 别名限定回车键
                * .tab  别名限定缩进键
                * .esc  别名限定退出键
                * .space 别名限定空格键
                * .delete (捕获“删除”和“退格”键)
                * .up   别名定义方向上
                * .down  别名定义方向下
                * .left  别名定义键盘方向左、定义鼠标左键
                * .right 别名定义键盘方向右、定义鼠标右键
                * .middle 定义鼠标中键(滚轮键)
        > **!!! 按键修饰符 连写为或者关系**
        -->
        <textarea cols="30" rows="10" @keydown.delete="printKeyDown2($event)"></textarea> <br>
        <textarea cols="30" rows="10" @keydown.up.down="printKeyDown2($event)"></textarea> <br>
        <textarea cols="30" rows="10" @keydown.right="printKeyDown2($event)"></textarea> <br>
        <div class="box" @mousedown.left="printMousedown($event)">鼠标事件</div> <br>
        <div class="box" @mousedown.middle="printMousedown($event)">鼠标事件</div> <br>
        <div class="box" @click="printMousedown($event)">鼠标事件-click</div> <br>
        <!-- click 定义 鼠标中件修饰符，将左键点击功能转换为中键点击功能 -->
        <div class="box" @click.middle="printMousedown($event)">鼠标事件</div> <br>

        <h3>系统修饰符按键</h3>
        <!-- 
        **系统修饰符：**监听外设键盘的上的特殊系统功能按键的状态
            * .ctrl 描述ctrl被激活时触发事件  event.ctrlKey
            * .alt 描述alt被激活时触发事件    event.altKey
            * .shift 描述shift被激活时触发事件  event.shiftKey
            * .meta 描述meta被激活时触发事件   event.metaKey
            > **!!!系统修饰键配合按键修饰符连写为并且关系** 
        -->
        <textarea cols="30" rows="10" @keydown.ctrl="printEvent($event)"></textarea> <br>
        <!-- if(e.ctrlKey&&e.key=="a") -->
        <textarea cols="30" rows="10" @keydown.ctrl.a="printEvent($event)"></textarea> <br>
        <!-- 当多个系统修饰和一个键盘修饰符组合时，表示最小事件调用的组合规则 -->
        <textarea cols="30" rows="10" @keydown.ctrl.shift.a="printEvent($event)"></textarea> <br>
        <!-- 当一个系统修饰和多个键盘按键修饰组合时，表示系统修饰符分别和按键修饰进行并且关联，再完成或者关联 -->
        <textarea cols="30" rows="10" @keydown.ctrl.a.b="printEvent($event)"></textarea> <br>
        <!-- 当多个系统修饰和多个键盘按键修饰组合时，表示多个系统修饰符分别和按键修饰进行并且关联，再完成或者关联 -->
        <textarea cols="30" rows="10" @keydown.ctrl.shift.a.c="printEvent($event)"></textarea> <br>
        <h3>精确修饰符(vue2.5^)</h3>
        <!-- 
            **精确修饰符(2.5+)：**
                * .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。 
        -->
        <textarea cols="30" rows="10" placeholder="只能由ctrl+a触发事件" @keydown.ctrl.a.exact="printEvent($event)"></textarea> <br>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    
                }
            },
            methods:{
                printKeyDown(e){
                    if(e.key=="a"){
                        console.log("键盘按键被按下:",e.key)
                    }
                },
                printKeyDown2(e){
                    console.log("键盘按键被按下:",e.key)
                },
                printMousedown(e){
                    console.log("鼠标按键被按下:",e)
                },
                printEvent(e){
                    console.log("键盘按键被按下:",e)
                }
            }
        }).mount("#app")
    </script>
</body>
</html>